import React, { useState, useEffect } from 'react'
import style from './index.module.scss'
import { Dropdown,NavBar } from 'antd-mobile'
import { Sidebar, List } from 'react-vant';
import { useNavigate } from 'react-router-dom'

import axios from 'axios'
const Index: React.FC = () => {
  const navigate = useNavigate()
  const [search, setSearch] = useState(localStorage.getItem('zhaokeshi'))
  const [list, setList] = useState<any>([])
  const [activeIndex, setActiveIndex] = useState(0)
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [findished, setFindished] = useState(false);
  const [yiyuan, setYiyuan] = useState([]);
  const [searchlist, setSearchList] = useState([])
  const getks = async () => {
    const res = await axios.get("/api/date")
    console.log(res);

  }
  const  [departments, setDepartments] = useState<any>([
    "内科",
    "外科",
    "妇产科学",
    "儿科学",
    "骨外科",
    "眼科学",
    "口腔科学",
    "耳鼻咽喉头颈科",
    "肿瘤科",
    "皮肤性病科",
    "男科",
    "皮肤美容",
    "烧伤科",
    "精神心理科",
    "中医学",
    "中西医结合科",
    "传染病科",
    "康复医学科",
    "麻醉医学科",
    "职业病科",
    "营养科",
    "医学影像学",
    "病理科",
    "护理",
    "药剂科",
    "全科",
    "其他科室"
  ]);
  const getsearch = async (keshi: any) => {
    const res = await axios.get('/api/city', { params: { keshi: keshi } })
   
    let arr:any=[]
    res.data.map((item: any) => {
      if(!arr.includes(item.keshi)){
        arr.push(item.keshi)
      }else{
        return
      }
    })
     setSearchList(arr)
  }
  const getkeshiList = async () => {
    const res = await axios.get('/api/city', { params: { keshi: search } })
   setYiyuan(res.data)
    console.log(res);
  }
  const searchkeshi = (index: number, keshi: any) => {
    setActiveIndex(index)
  
    getsearch(keshi)
  }
  const getkeshi=(item: string)=>{
    console.log(item);
     navigate(0)
      localStorage.setItem('zhaokeshi', item)
  }
  const onLoad = async () => {
    const res = await axios.get("/api/date", {
      params: {
        pageSize,
        currentPage,
      },
    });
    const { data, code } = res.data;
    if (code === 200) {
      //修改页码+1
      setCurrentPage(currentPage + 1);
      //合并数据
      setList([...list, ...data]);
      console.log(data);
    } else {
      setFindished(true); //数据加载完成
    }
  };
  useEffect(() => {
    getkeshiList()
  }, [])
  return (
    <div>
       <NavBar style={{background:'blue',color:'white'}} onBack={()=>navigate(-1)}>按医院找</NavBar>
       <div style={{ textAlign: 'center'}}>
         <img style={{width:'90%'}} src="../../src/img/allguo.gif" alt="" />
       </div>
      <Dropdown>
        <Dropdown.Item key='sorter' title={search?search:'选择科室'}>
          <div style={{ padding: 12 }}>
            <div className={style.activebox}>
              <div className={style.activeleft}>
               
                  {departments.map((item: any, index: number) => (
                    <div key={index} className={index === activeIndex ? style.active : ''} onClick={() => searchkeshi(index, item)} >
                      {item}
                    </div>
                  ))}
              
              </div>
              <div className={style.activeright}>
                {
                 searchlist.length>0&&searchlist.map((item, index) => {
                    return <div key={index} onClick={()=>getkeshi(item)}>
                      {item}
                    </div>
                  })
                }
              </div>
            </div>
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='bizop' title='商机筛选'>
          <div style={{ padding: 12 }}>
            商机筛选内容
            <br />
            商机筛选内容
            <br />
            商机筛选内容
            <br />
          </div>
        </Dropdown.Item>
        <Dropdown.Item key='more' title='更多筛选'>
          <div style={{ padding: 12 }}>
            更多筛选内容
            <br />
            更多筛选内容
            <br />
          </div>
        </Dropdown.Item>
      </Dropdown>
      {
        search?
        <div>
          {yiyuan.map((item: any, index: any) => (
          <div key={index} className={style.listbox} >
            <div className={style.listbox1}>
              <img src='../../src/img/szjyy.png' alt="" />
              <div className={style.listbox1right}>
                <div>{item.address}&nbsp;{item.hospital}</div>
                <div>三甲&nbsp; 综合医院</div>
              </div> 
            </div>
            <div className={style.listxt}></div>
          </div>
        ))}
        </div>
      :<List finished={findished} onLoad={onLoad}>
        {list.map((item: any, index: any) => (
          <div key={index} className={style.listbox} >
            <div className={style.listbox1}>
              <img src='../../src/img/szjyy.png' alt="" />
              <div className={style.listbox1right}>
                <div>{item.address}&nbsp;{item.hospital}</div>
                <div>三甲&nbsp; 综合医院</div>
              </div>
            </div>
            <div className={style.listxt}></div>
          </div>
        ))}
      </List>
      }
      
    </div>
  )
}

export default Index
